<template>
<div>
    <h2>shallowReactive和shallowRef</h2>
    <ul>
        <li>m1:{{m1}}</li>
        <li>m2:{{m2}}</li>
        <li>m3:{{m3}}</li>
        <li>m4:{{m4}}</li>
    </ul>
    <button @click="update">更改数据</button>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, shallowReactive, shallowRef, ref } from 'vue'
export default defineComponent({
    name: 'App',
    setup() {
        // 深度劫持（深监视）-深度响应式
        const m1 = reactive({
            name: '鸣人',
            age: 20,
            car: {
                name: '大奔',
                color: 'red'
            }
        })
        // 浅劫持（浅监视）-浅响应式
        const m2 = shallowReactive({
            name: '鸣人',
            age: 20,
            car: {
                name: '大奔',
                color: 'red'
            }
        })
        const m3 = ref({
            name: '鸣人',
            age: 20,
            car: {
                name: '大奔',
                color: 'red'
            }
        })
        const m4 =shallowRef({
            name: '鸣人',
            age: 20,
            car: {
                name: '大奔',
                color: 'red'
            }
        })
        const update = () => {
            // 更改m1的数据---->reactive方式
            // m1.name += '1'
            // m1.car.name += '11'
            // 更改m2的数据---->shallowReactive方式
            // m2.name += '2'
            // m2.car.name += '22'
            // 更改m3的数据---->ref方式
            // m3.value.name += '3'
            // m3.value.car.name += '33'
            // 更改m4的数据---->shallowRef方式
            // m4.value.name += '4'
            // m4.value.car.name += '44'
            console.log(m3, m4)
        }
        return {
            m1,
            m2,
            m3,
            m4,
            update
        }
    },
})
</script>
<style>
</style>